<script setup lang="ts">
import type { EvaluateDoc } from '@/types/room'
import { showFailToast } from 'vant';
import { computed, ref } from 'vue';
import { evaluateConsultOrder } from '@/apis/consult';
defineProps<{
    evaluateDoc?: EvaluateDoc
}>()
const score = ref(0)
const anonymousFlag = ref(false)
const content = ref('')
const disabled = computed(() => !score.value || !content.value)

const onSubmit = async () => {
    if (!score.value) { return showFailToast("请选择评分") }
    if (!content.value) { return showFailToast("请填写评分") }
    if (!consult?.value) return showFailToast("未找到订单")
    await evaluateConsultOrder({
        docId: consult.value?.docInfo?.id || '',
        orderId: consult.value?.id,
        score: score.value,
        content: content.value,
        anonymousFlag: anonymousFlag.value ? 1 : 0
    })
    completeEva && completeEva(score.value)
}

import { inject, type Ref } from 'vue'
import type { ConsultOrderItem } from '@/types/consult'

const consult = inject<Ref<ConsultOrderItem>>('consult')
const completeEva = inject<(score: number) => void>('completeEva')

</script>
<template>
    <div>
        <div class="evalutate-card" v-if="evaluateDoc">
            <p class="title">感谢您的评价</p>
            <p class="desc">本次在线问诊服务您还满意吗？</p>
            <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)"
                :modelValue="evaluateDoc?.score" />
            <van-field type="textarea" maxlength="150" show-word-limit rows="3" placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
                :modelValue="evaluateDoc?.content"></van-field>
            <div class="footer">
                <!-- <van-checkbox>匿名评价</van-checkbox> -->
                <van-button type="primary" size="small" round :class="{ disabled }">
                    已提交评价
                </van-button>
            </div>
        </div>
        <div class="no-evaluate" v-else>
            <p class="title">感谢您的评价</p>
            <p class="desc">本次在线问诊服务您还满意吗？</p>
            <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)"
                v-model="score" />
            <van-field type="textarea" maxlength="150" show-word-limit rows="3" placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
                v-model="content"></van-field>
            <div class="footer">
                <van-checkbox v-model="anonymousFlag">匿名评价</van-checkbox>
                <van-button type="primary" size="small" round @click="onSubmit" :class="{ disabled }">
                    提交评价
                </van-button>
            </div>
        </div>

    </div>
</template>


<style scoped>
.evalutate-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;

    .title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .desc {
        font-size: 12px;
        margin-bottom: 15px;
        color: var(--cp-tip);
    }

    .van-field {
        background-color: var(--cp-bg);
        margin: 15px 0;
        border-radius: 8px;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        ::v-deep() {
            .van-checkbox {
                .van-icon {
                    font-size: 12px;
                }

                &__label {
                    font-size: 12px;
                    color: var(--cp-tip);
                }

                height: 16px;
            }

            .van-button {
                padding: 0 16px;

                &.disabled {
                    opacity: 1;
                    background: #fafafa;
                    color: #d9dbde;
                    border: #fafafa;
                }
            }
        }
    }
}

.no-evaluate {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;

    .title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .desc {
        font-size: 12px;
        margin-bottom: 15px;
        color: var(--cp-tip);
    }

    .van-field {
        background-color: var(--cp-bg);
        margin: 15px 0;
        border-radius: 8px;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        ::v-deep() {
            .van-checkbox {
                .van-icon {
                    font-size: 12px;
                }

                &__label {
                    font-size: 12px;
                    color: var(--cp-tip);
                }

                height: 16px;
            }

            .van-button {
                padding: 0 16px;

                &.disabled {
                    opacity: 1;
                    background: #fafafa;
                    color: #d9dbde;
                    border: #fafafa;
                }
            }
        }
    }
}
</style>